<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="dox">hello</div>
    <div class="dox">world</div>
    <div class="dox1">在吗？</div>
    <div class="dox2">嗯嗯，干嘛！</div>
    <p> 使用DOM操作元素</p>
    <p class="box"> 这是关于有类名的p标签 </p>
    <div id="box">
        <h1>这是div中的一级标题</h1>
    </div>

    
</body>
<script>
    //获取页面元素 ：querSelector() 和 querSelectorAll()
    //做认识 ： getElementById() 、getElementsByTagName() 、 getElementsByName() ,
    //let const
    //querySelector('选择器名字' )只会获取第一个元素 选择器可以时 标签选择器 、类选择器 （.类名）和ID选择器（#ID名）
    const e1m1 =document.querySelector('div'); //通过标签选择
    console.log(e1m1);  
    const e1m2 = document.querySelector('.box1'); //通过类选择器拿到元素
    console.log(e1m2);
    const e1m3 = document.querySelector('#box h1 li:nth-child(5)'); //复合选择器  
    console.log(e1m3);

    console.log('-------------------------');
    const em1 =document.querySelectorAll('div');
    console.log(em1);  //伪元素
    for(let i= 0 ;i< em1.length;i++){
        console.log(em1[i]);
    }
    em1[2].style.color = 'red';

    
    
</script>
</html>